<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"+"MFController/";
%>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath()+"/picture");
	pageContext.setAttribute("APP_PATH_USER", request.getContextPath()+"/user");
		pageContext.setAttribute("basePath", basePath);
 %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <meta charset="utf-8">
    <title>米孚管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Charisma, a fully featured, responsive, HTML5, Bootstrap admin template.">
    <meta name="author" content="Muhammad Usman">

    <!-- The styles -->
    <link id="bs-css" href="css/bootstrap-cerulean.min.css" rel="stylesheet">

    <link href="css/charisma-app.css" rel="stylesheet">
    <link href='bower_components/fullcalendar/dist/fullcalendar.css' rel='stylesheet'>
    <link href='bower_components/fullcalendar/dist/fullcalendar.print.css' rel='stylesheet' media='print'>
    <link href='bower_components/chosen/chosen.min.css' rel='stylesheet'>
    <link href='bower_components/colorbox/example3/colorbox.css' rel='stylesheet'>
    <link href='bower_components/responsive-tables/responsive-tables.css' rel='stylesheet'>
    <link href='bower_components/bootstrap-tour/build/css/bootstrap-tour.min.css' rel='stylesheet'>
    <link href='css/jquery.noty.css' rel='stylesheet'>
    <link href='css/noty_theme_default.css' rel='stylesheet'>
    <link href='css/elfinder.min.css' rel='stylesheet'>
    <link href='css/elfinder.theme.css' rel='stylesheet'>
    <link href='css/jquery.iphone.toggle.css' rel='stylesheet'>
    <link href='css/uploadify.css' rel='stylesheet'>
    <link href='css/animate.min.css' rel='stylesheet'>

    <!-- jQuery -->
    <script src="bower_components/jquery/jquery.min.js"></script>

    <!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- The fav icon -->
    <link rel="shortcut icon" href="img/favicon.ico">

</head>


<body>


<!-- 图片信息修改的模态框 -->
<div class="modal fade" id="pictureUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" >图片信息修改</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal">
		  <div class="form-group">
		    <label for="title_update_input" class="col-sm-2 control-label">图片名称</label>
		    <div class="col-sm-10">
		     <input type="text" name="title"  class="form-control" id="title_update_input" placeholder="图片名称">
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="picturetype_update_select" class="col-sm-2 control-label">图片类型</label>
		    <div class="col-sm-10">
		      <select class="form-control" name="type" id="picturetype_update_select" >
												<option value="动漫">动漫</option>
											<option value="清新">清新</option>
											<option value="风景">风景</option>
											<option value="简约">简约</option>
											<option value="唯美">唯美</option>
				</select>
		      <span class="help-block"></span>
		    </div>
		  </div>
		  <div class="form-group">
		    <label  class="col-sm-2 control-label">建立者</label>
		    <div class="col-sm-10">
		     <input type="text" name="builder"  class="form-control" id="builder_update_input" placeholder="建立者">
		    </div>
		  </div>
		  <div class="form-group">
		    <label  class="col-sm-2 control-label">简介</label>
		    <div class="col-sm-4">
		      	<input type="text" name="intro"  class="form-control" id="intro_update_input" placeholder="简介">
		    </div>
		  </div>
		  <div class="form-group">
		    <label  class="col-sm-2 control-label">详情</label>
		    <div class="col-sm-4">
		      		<textarea class="form-control" id="detalis" name="detalis"
											placeholder="图片详情"></textarea>
		    </div>
		  </div>
		  
		  
		</form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="picture_update_btn">更新</button>
      </div>
    </div>
  </div>
</div>

<!-- 音乐信息修改的模态框 -->
<div class="modal fade" id="musicUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" >音乐信息修改</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal">
		  <div class="form-group">
		    <label for="music_title_update_input" class="col-sm-2 control-label">音乐配图名称</label>
		    <div class="col-sm-10">
		     <input type="text" name="title"  class="form-control" id="music_title_update_input" placeholder="音乐配图名称">
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="music_picturetype_update_select" class="col-sm-2 control-label">配图类型</label>
		    <div class="col-sm-10">
		      <select class="form-control" name="type" id="music_picturetype_update_select" >
												<option value="动漫">动漫</option>
											<option value="清新">清新</option>
											<option value="风景">风景</option>
											<option value="简约">简约</option>
											<option value="唯美">唯美</option>
				</select>
		      <span class="help-block"></span>
		    </div>
		  </div>
		  <div class="form-group">
		    <label  class="col-sm-2 control-label">建立者</label>
		    <div class="col-sm-10">
		     <input type="text" name="builder"  class="form-control" id="music_builder_update_input" placeholder="建立者">
		    </div>
		  </div>
		  
		  	  <div class="form-group">
		    <label  class="col-sm-2 control-label">音乐名</label>
		    <div class="col-sm-10">
		     		  <input type="text"
											class="form-control" id="musicname" name="musicname"
											placeholder="音乐名" required>
		    </div>
		  </div>

		  
		  
		  <div class="form-group">
		    <label  class="col-sm-2 control-label">简介</label>
		    <div class="col-sm-4">
		      	<input type="text" name="intro"  class="form-control" id="music_intro_update_input" placeholder="简介">
		    </div>
		  </div>
		  <div class="form-group">
		    <label  class="col-sm-2 control-label">详情</label>
		    <div class="col-sm-4">
		      		<textarea class="form-control" id="music_detalis" name="detalis"
											placeholder="音乐详情"></textarea>
		    </div>
		  </div>
		  
		  
		</form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="music_update_btn">更新</button>
      </div>
    </div>
  </div>
</div>



    <!-- topbar starts -->
    <div class="navbar navbar-default" role="navigation">

        <div class="navbar-inner">
            <button type="button" class="navbar-toggle pull-left animated flip">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
            <a class="navbar-brand" href="form.jsp"> <img alt="Charisma Logo" src="img/logo20.png" class="hidden-xs" />
                <span>米孚管理</span></a>

            <!-- user dropdown starts -->
            <div class="btn-group pull-right">
                <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <i class="glyphicon glyphicon-user"></i><span class="hidden-sm hidden-xs"> admin</span>
                            <span class="caret"></span>
                        </button>
                <ul class="dropdown-menu">
                    <li><a >个人信息</a></li>
                    <li class="divider"></li>
                    <li><a  id="log_out_a"  >登出</a></li>
                </ul>
            </div>
            <!-- user dropdown ends -->

            <!-- theme selector starts -->
            <div class="btn-group pull-right theme-container animated tada">
                <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <i class="glyphicon glyphicon-tint"></i><span
                                class="hidden-sm hidden-xs"> 更改主题 / Skin</span>
                            <span class="caret"></span>
                        </button>
                <ul class="dropdown-menu" id="themes">
                    <li><a data-value="classic" ><i class="whitespace"></i> Classic</a></li>
                    <li><a data-value="cerulean" ><i class="whitespace"></i> Cerulean</a></li>
                    <li><a data-value="cyborg" ><i class="whitespace"></i> Cyborg</a></li>
                    <li><a data-value="simplex" ><i class="whitespace"></i> Simplex</a></li>
                    <li><a data-value="darkly" ><i class="whitespace"></i> Darkly</a></li>
                    <li><a data-value="lumen" ><i class="whitespace"></i> Lumen</a></li>
                    <li><a data-value="slate" ><i class="whitespace"></i> Slate</a></li>
                    <li><a data-value="spacelab" ><i class="whitespace"></i> Spacelab</a></li>
                    <li><a data-value="united" ><i class="whitespace"></i> United</a></li>
                </ul>
            </div>
            <!-- theme selector ends -->


        </div>
    </div>
    <!-- topbar ends -->
    <div class="ch-container">
        <div class="row">

            <!-- left menu starts -->
            <div class="col-sm-2 col-lg-2">
                <div class="sidebar-nav">
                    <div class="nav-canvas">
                        <div class="nav-sm nav nav-stacked">

                        </div>
                        <ul class="nav nav-pills nav-stacked main-menu">
                            <li class="nav-header">主要</li>

                            <li><a class="ajax-link" href="form.jsp"><i
                                            class="glyphicon glyphicon-edit"></i><span> 图片/音乐上传</span></a></li>


                            <li><a class="ajax-link" href="gallery.jsp"><i class="glyphicon glyphicon-picture"></i><span> 图片/音乐查看</span></a>
                            </li>

                            <li><a class="ajax-link" href="${pageContext.request.contextPath }/UserServlet"><i
                                            class="glyphicon glyphicon-align-justify"></i><span>    用户管理</span></a></li>


                        </ul>

                    </div>
                </div>
            </div>
            <!--/span-->
            <!-- left menu ends -->

            <noscript>
            <div class="alert alert-block col-md-12">
                <h4 class="alert-heading">Warning!</h4>

                <p>You need to have <a href="http://en.wikipedia.org/wiki/JavaScript" target="_blank">JavaScript</a>
                    enabled to use this site.</p>
            </div>
        </noscript>

            <div id="content" class="col-lg-10 col-sm-10">
                <!-- content starts 图片查看 -->
                <div>
                    <ul class="breadcrumb">
                        <li>
                            <a>主要</a>
                        </li>
                        <li>
                            <a >图片查看</a>
                        </li>
                    </ul>
                </div>

                <div class="row">
                    <div class="box col-md-12">
                        <div class="box-inner">
                            <div class="box-header well" data-original-title="">
                                <h2><i class="glyphicon glyphicon-picture"></i> 图片查看编辑</h2>

                                <div class="box-icon">
                                    <a  class="btn btn-setting btn-round btn-default"><i
                                class="glyphicon glyphicon-cog"></i></a>
                                    <a  class="btn btn-minimize btn-round btn-default"><i
                                class="glyphicon glyphicon-chevron-up"></i></a>
                                    <a  class="btn btn-close btn-round btn-default"><i
                                class="glyphicon glyphicon-remove"></i></a>
                                </div>
                            </div>
                            <div class="box-content">
                                <br>
                                <ul class="thumbnails gallery" id="picture_list_ul">

                                </ul>
                               
                            </div>
                        </div>
                    </div>
                    <!--/span-->

                </div>
                <!--/row-->
                
                
                                <!-- content starts 音乐查看 -->
                <div>
                    <ul class="breadcrumb">
                        <li>
                            <a >主要</a>
                        </li>
                        <li>
                            <a >音乐查看</a>
                        </li>
                    </ul>
                </div>

                <div class="row">
                    <div class="box col-md-12">
                        <div class="box-inner">
                            <div class="box-header well" data-original-title="">
                                <h2><i class="glyphicon glyphicon-picture"></i> 音乐查看编辑</h2>

                                <div class="box-icon">
                                    <a  class="btn btn-setting btn-round btn-default"><i
                                class="glyphicon glyphicon-cog"></i></a>
                                    <a  class="btn btn-minimize btn-round btn-default"><i
                                class="glyphicon glyphicon-chevron-up"></i></a>
                                    <a  class="btn btn-close btn-round btn-default"><i
                                class="glyphicon glyphicon-remove"></i></a>
                                </div>
                            </div>
                            <div class="box-content">
                                
                              <br>
                                <ul class="thumbnails gallery" id="music_list_ul">

                                </ul>
                            </div>
                        </div>
                    </div>
                    <!--/span-->

                </div>
                <!--/row-->
                

                <!-- content ends -->
            </div>
            <!--/#content.col-md-0-->
        </div>
        <!--/fluid-row-->

        <hr>

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">×</button>
                        <h3>设置</h3>
                    </div>
                    <div class="modal-body">
                        <p>这里空空如也...</p>
                    </div>
                    <div class="modal-footer">
                        <a  class="btn btn-default" data-dismiss="modal">关闭</a>
                        <a  class="btn btn-primary" data-dismiss="modal">保存更改</a>
                    </div>
                </div>
            </div>
        </div>

        <footer class="row">
            <p class="col-md-9 col-sm-9 col-xs-12 copyright">&copy; <a  target="_blank">墨雨
                                </a> 莲带两色，一色为之生，一色为之死……</p>

            <p class="col-md-3 col-sm-3 col-xs-12 powered-by">Powered by: <a >墨雨</a></p>
        </footer>

    </div>
    <!--/.fluid-container-->

    <!-- external javascript -->

    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

    <!-- library for cookie management -->
    <script src="js/jquery.cookie.js"></script>
    <!-- calender plugin -->
    <script src='bower_components/moment/min/moment.min.js'></script>
    <script src='bower_components/fullcalendar/dist/fullcalendar.min.js'></script>
    <!-- data table plugin -->
    <script src='js/jquery.dataTables.min.js'></script>

    <!-- select or dropdown enhancer -->
    <script src="bower_components/chosen/chosen.jquery.min.js"></script>
    <!-- plugin for gallery image view -->
    <script src="bower_components/colorbox/jquery.colorbox-min.js"></script>
    <!-- notification plugin -->
    <script src="js/jquery.noty.js"></script>
    <!-- library for making tables responsive -->
    <script src="bower_components/responsive-tables/responsive-tables.js"></script>
    <!-- tour plugin -->
    <script src="bower_components/bootstrap-tour/build/js/bootstrap-tour.min.js"></script>
    <!-- star rating plugin -->
    <script src="js/jquery.raty.min.js"></script>
    <!-- for iOS style toggle switch -->
    <script src="js/jquery.iphone.toggle.js"></script>
    <!-- autogrowing textarea plugin -->
    <script src="js/jquery.autogrow-textarea.js"></script>
    <!-- multiple file upload plugin -->
    <script src="js/jquery.uploadify-3.1.min.js"></script>
    <!-- history.js for cross-browser state change on ajax -->
    <script src="js/jquery.history.js"></script>

	<!-- my js -->
    <script src="js/picture-controller.js"></script> 
	<script>

				

    	
			//异步加载图片音乐	
			$(function() {
			    show_picture();
			});

			function show_picture() {
			    $.ajax({
			        url: "${APP_PATH}/allPicture",
			        type: "GET",
			        dataType : 'json',
			        success: function(result) {
			        	//动态生成图片列表
			        	console.log(result);
			            build_picture_list(result);
			            build_music_list(result);
			        }
			    });
			}
			//删除请求方法
			$(document).on("click",".gallery-delete",function(){
				var id=$(this).attr("del-id");
				var type=$(this).attr("del-type");
				var name=$(this).attr("del-name");
				if(confirm("确定删除 《"+name+"》吗？")){
					if(type==="picture"){
						var realname=$(this).attr("del-realname");
						 $.ajax({
								        url: "${APP_PATH}/delPicture?id="+id+"&realname="+realname,
								        type: "POST",
								        dataType : 'json',
								        success: function(result) {
								        	//动态生成图片列表
								        	//console.log(result);
								        	alert("删除成功！");
								        }
								    });
					}else{
						var pictitle=$(this).attr("del-pictitle");
						var musicrealname=$(this).attr("del-musicrealname");
						$.ajax({
									        url: "${APP_PATH}/delMusic?id="+id+"&pictitle="+pictitle+"&musicrealname="+musicrealname,
									        type: "POST",
									        dataType : 'json',
									        success: function(result) {
									        	//动态生成图片列表
									        	//console.log(result);
									        	alert("删除成功！");
									        }
									    });
					
					}
					$(this).parents('.thumbnail').fadeOut();
				}
			})
			
			//获取数据回显方法
			function getPictureInfo(picid){
			    $.ajax({
			        url: "${APP_PATH}/getPicture?id="+picid,
			        type: "GET",
			        dataType : 'json',
			        success: function(result) {
			        	//动态生成图片列表
			        	showPictureInfo(result);
			        	//console.log(result);
			        }
			    });
		}
			//音乐
			function getMusicInfo(musicid){
			    $.ajax({
			        url: "${APP_PATH}/getMusic?id="+musicid,
			        type: "GET",
			        dataType : 'json',
			        success: function(result) {
			        	//动态生成图片列表
			        	showMusicInfo(result);
			        	//console.log(result);
			        }
			    });
	
		}
		$("#picture_update_btn").click(function(){
			//发送ajax请求更新图片信息
			//alert($(this).attr("picid"));
			var picid=$(this).attr("picid");
			var realname=$(this).attr("realname");
			    $.ajax({
			        url: "${APP_PATH}/updatePicture?id="+picid+"&realname="+realname,
			        type: "POST",
			        data:$("#pictureUpdateModal form").serialize(),
			        dataType : 'json',
			        success: function(result) {
			        	console.log(result);
			        	alert("更新成功！");
			        }
			    });
		});
		
		$("#music_update_btn").click(function(){
					var musicid=$(this).attr("musicid");
					var musicrealname=$(this).attr("musicrealname");
					var picrealname=$(this).attr("picrealname");
					var pictureid=$(this).attr("pictureid");
				    $.ajax({
			        url: "${APP_PATH}/updateMusic?musicid="+musicid+"&musicrealname="
			        +musicrealname+"&picrealname="+picrealname+"&pictureid="+pictureid,
			        type: "POST",
			        data:$("#musicUpdateModal form").serialize(),
			        dataType : 'json',
			        success: function(result) {
			        	console.log(result);
			        	alert("更新成功！");
			        }
			    });
		});
			
			$("#log_out_a").click(function(){
				    $.ajax({
			        url: "${APP_PATH_USER}/logout",
			        type: "POST",
			        dataType : 'json',
			        success: function(result) {
				        	console.log(result);
				        	       	alert("已登出");
				        	     	 window.location.replace("${basePath}login.jsp");
					     }
			    });
			});
	</script>
	    <!-- application script for Charisma demo -->
     <script src="js/charisma.js"></script> 

</body>

</html>